<template>
    <div>
        <div class="pageHeader">
            <span>开始时间：</span>
            <el-date-picker
                    value-format="yyyy-MM-dd"
                    v-model="scheListStartDate"
                    type="date"
                    placeholder="选择日期">
            </el-date-picker>
            <span>结束时间：</span>
            <el-date-picker
                    value-format="yyyy-MM-dd"
                    v-model="scheListEndDate"
                    type="date"
                    placeholder="选择日期">
            </el-date-picker>
            <el-button type="primary" @click="initScheListBtn">查询医生排班</el-button>
            <el-button type="primary" @click="showDialogOfAddRule">新增排班规则</el-button>
            <el-button type="primary" @click="showDialogOfHadRule">查看排班规则（生成排班计划）</el-button>
        </div>
        <div>
            <el-table
                    :data="scheListTableData">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="scheddate"
                        label="日期">
                </el-table-column>
                <el-table-column
                        prop="dept.deptname"
                        label="科室">
                </el-table-column>
                <el-table-column
                        prop="user.realname"
                        label="医生"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="noon"
                        label="午别"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="user.registlevel.registname"
                        label="挂号级别"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="user.registlevel.registquota"
                        label="挂号限额"
                        show-overflow-tooltip>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
                style="margin:10px 0;"
                background
                layout="prev, pager, next"
                @current-change="scheListCurrentChange"
                :page-size="scheListPageSize"
                :current-page="scheListPageNum"
                :total="scheListTotal">
        </el-pagination>
        <el-button type="danger" size="mini">批量删除</el-button>
<!--        //新增值班规则弹窗-->
        <el-dialog
                @close="clearDeptLevelInfo"
                center
                title="新增排班规则"
                :visible.sync="dialogVisibleOfAddRule"
                width="95%">
            <div>
                <div style="text-align: center">
                    <span>科室选择:</span>
                    <el-select style="margin: 0 10px" size="mini" v-model="deptIdOfAddRule" placeholder="科室">
                        <el-option
                                v-for="item in deptList"
                                :key="item.id"
                                :label="item.deptname"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <span>挂号级别:</span>
                    <el-select style="margin: 0 10px" size="mini" v-model="registLeveIdOfAddRule" placeholder="挂号级别">
                        <el-option
                                v-for="item in registLevelList"
                                :key="item.id"
                                :label="item.registname"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <el-button size="mini" type="primary" @click="serchDoctorNeedRule">查询</el-button>
                    <el-button @click="clearDeptLevelInfo" icon="fa fa-refresh" size="mini" type="primary"> 清空</el-button>
                </div>
                //查询显示
                <div>
                    <el-table
                            @selection-change="chooseDoctorSche"
                            :data="doctorListOfRule">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                prop="realname"
                                label="医生姓名">
                        </el-table-column>
                        <el-table-column
                                label="周一 上午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm1"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="周一 下午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm2"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="周二 上午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm3"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="周二 下午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm4"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="周三 上午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm5"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="周三 下午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm6"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="周四 上午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm7"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="周四 下午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm8"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="周五 上午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm9"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="周五 下午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm10"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="周六 上午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm11"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="周六 下午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm12"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="周日 上午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm13"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="周日 下午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm14"></el-checkbox>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div style="text-align: center;margin: 10px 0">
                    <span>规则名称：</span>
                    <el-input v-model=" schedulingData.ruleName" size="mini" style="width: 150px;" placeholder="规则名称"></el-input>
                </div>
                <div style="text-align: center;">
                    <el-button size="mini" type="warning" @click="dialogVisible = false">取 消</el-button>
                    <el-button size="mini" type="primary" @click="saveRule">保 存</el-button>
                </div>
            </div>
        </el-dialog>
<!--        生成的规则查询-->
        <el-dialog
                style="text-align: center"
                title="排班规则查询"
                :visible.sync="dialogVisibleOfHadRules">

            科室选择<el-select v-model="deptIdOfAddRule" placeholder="请选择科室">
            <el-option
                    v-for="item in deptList"
                    :key="item.id"
                    :label="item.deptname"
                    :value="item.id">
            </el-option>
        </el-select>
            <el-button size="mini" type="primary" @click="serchHadRules">查询</el-button>
            <el-button size="mini" type="primary">清空</el-button>
            <el-table :data="dialogHadRules">
                <el-table-column property="rulename" label="规则名称" width="150"></el-table-column>
                <el-table-column property="dept.deptname" label="科室名称" width="200"></el-table-column>
                <el-table-column property="user.realname" label="医生姓名"></el-table-column>
                <el-table-column property="week" label="时间"></el-table-column>
            </el-table>
            <div>
                <span>开始日期：</span>
                <el-date-picker

                        style="width: 20%"
                        value-format="yyyy-MM-dd"
                        v-model="scheListStartDate"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
                <span>结束日期：</span>
                <el-date-picker
                        style="width: 20%"
                        value-format="yyyy-MM-dd"
                        v-model="scheListEndDate"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
                <el-button type="primary" size="mini">选择规则生成排班计划</el-button>
                <div>
                    <el-button type="primary" size="mini">关闭</el-button>
                </div>

            </div>
        </el-dialog>



    </div>
</template>

<script>
    export default {
        name: "SysSche",
        data(){
            return{


                dialogHadRules:[],
                dialogVisibleOfHadRules:false,
                //定义一个对象接收选择的排班医生的部门及排班的时间段，将整个数据整合后发到后端
                schedulingData:{
                  deptIds:[],
                  userIds:[],
                  week:[],
                  ruleName: '',//规则名字
                },

                chooseDoctorOfRule:[],//选择的医生

                doctorListOfRule : [],//弹窗数据

                registLeveIdOfAddRule :'',//下拉菜单选择
                deptIdOfAddRule : '',

                registLevelList : [],//初始化查询结果返回
                deptList :[],

                dialogVisibleOfAddRule : false,

                scheListTotal:0,
                scheListPageNum:1,
                scheListPageSize:8,
                scheListStartDate:'',
                scheListEndDate:'',
                scheListTableData:[],

            }
        },
        methods:{
            //查询已经生成的排班规则
            serchHadRules(){
                this.$getRequest('/sys/scheduling/getHadRules?deptId='+this.deptIdOfAddRule).then(resp=>{
                    if (resp){
                        this.dialogHadRules=resp;
                        console.log(resp);
                    }
                })
            },
            //已经完成的排班列表查看
            showDialogOfHadRule(){
                this.initDeptList()
                this. dialogVisibleOfHadRules=true;
            },
            //排班规则保存
            saveRule(){
                this.schedulingData.userIds=[];
                this.schedulingData.deptIds=[];
                this.schedulingData.week=[];

                this.chooseDoctorOfRule.forEach((doctor,i)=>{
                    this.schedulingData.deptIds.push(doctor.deptid);
                    this.schedulingData.userIds.push(doctor.id);
                    let rule ='00000000000000';
                    for (let j=0;j<rule.length;j++){
                        if (doctor['charm'+(j+1)]==true){
                            rule = rule.substring(0,j)+'1'+rule.substring(j+1);
                        }
                    }
                    this.schedulingData.week.push(rule);
                })
                this.$postRequest("/sys/scheduling/addRule",this.schedulingData).then(resp=>{
                    if (resp){
                        //查询完毕以后将所有数据清空
                        this.schedulingData.userIds=[];
                        this.schedulingData.deptIds=[];
                        this.schedulingData.week=[];
                        this.schedulingData.ruleName='';
                        this.clearDeptLevelInfo();
                        this.doctorListOfRule=[];
                    }
                })
            },
            //查询排班医生
            serchDoctorNeedRule(){
                this.$getRequest("/sys/scheduling/getNeeRuleUsers?deptId="+this.deptIdOfAddRule+"&registLevelId="+this.registLeveIdOfAddRule).then(resp=>{
                    if (resp){
                        this.doctorListOfRule=resp
                    }
                })
            },
            //选择排班医生
            chooseDoctorSche(selection){
                this.chooseDoctorOfRule=selection;
            },


            // 清空 新增排班 下拉框
            clearDeptLevelInfo() {
                this.deptIdOfAddRule = '';
                this.registLeveIdOfAddRule = '';
            },
            // 初始化科室
            initDeptList() {
                this.$getRequest('/sys/scheduling/getDeptList').then(resp => {
                    if (resp) {
                        this.deptList = resp;
                    }
                })
            },
            // 初始化挂号级别
            initRegistLevelList() {
                this.$getRequest('/sys/scheduling/getRegistLevelList').then(resp => {
                    if (resp) {
                        this.registLevelList = resp;
                    }
                })
            },

            //新增排班规则
            showDialogOfAddRule() {
                this.dialogVisibleOfAddRule = true;
                this.initDeptList();
                this.initRegistLevelList();
            },

            //查询排班
            initScheListBtn(){
                this.scheListPageNum=1;
                this.initScheList();
            },
            //分页处理
            scheListCurrentChange(pageNum){
                this.scheListPageNum=pageNum;
                this.initScheList();
            },

            //初始化分页
            initScheList(){
                this.$getRequest("/sys/scheduling/getScheList?beginDate="+this.scheListStartDate+"&endDate="+this.scheListEndDate+"&pageNum="+this.scheListPageNum+"&pageSize="+this.scheListPageSize).then(resp=>{
                    if (resp){
                        this.scheListTotal=resp.total;
                        this.scheListTableData=resp.list;

                    }
                })
            },
        },
        mounted(){
            this.initScheList();
        }
    }
</script>

<style scoped>

</style>